<template>
	<view>
		<view class=" tips">
			爱买车查询结果不做准确性，完整性承诺，本查询结果仅供参考
		</view>
		<view class="">
			<view class="_flex align-items_center carBox ">
				<view class="" style="margin-left: 30rpx;">
					<view class="">
						{{carInfo.brand_name}}{{carInfo.series_name}}
					</view>
					<view class="" style="font-size: 24rpx;">
						<view class="">
							VIN：{{carInfo.vin}}
						</view>
						<view class="">
							报告生成日期：{{carInfo.report_time}}
						</view>
					</view>
				</view>
			</view>
			<view class="reportbox1">
				<view class="_flex align-items_center report_tit">
					<image src="../../static/zhckpg.png" class="titleImg" mode="aspectFit"></image>
					爱买车综合车况评级
					<!-- <view class="report_tit_r" style="color: #888;">
						评级规则
					</view> -->
				</view>
				<view class="" style="padding: 40rpx 0;">
					<!-- <u-steps :list="numList" active-color="#002a58" :current="accidentGrade" mode="dot"></u-steps> -->
					
					<view class="" style="padding: 40rpx 45rpx;">
						<!-- <u-steps :list="numList" active-color="#FD7E6E" :current="accidentGrade" mode="dot"></u-steps> -->
						<view class="jdtList">
							<view>
								<view :class="accidentGrade==1?'act':''"></view>
								<text :class="accidentGrade==1?'act1':''">优</text>
							</view>
							<view class="xian"></view>
							<view>
								<view :class="accidentGrade==2?'act':''"></view>
								<text :class="accidentGrade==2?'act1':''">良</text>
								
							</view>
							<view class="xian"></view>
							<view>
								<view :class="accidentGrade==3?'act':''"></view>
								<text :class="accidentGrade==3?'act1':''">中</text>
							</view>
							<view class="xian"></view>
							<view>
								<view :class="accidentGrade==4?'act':''"></view>
								<text :class="accidentGrade==4?'act1':''">差</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		
		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/sg.png" class="titleImg" mode="aspectFit"></image>
				重要事故排查
			<!-- 	<view class="report_tit_r" style="color: #888;">
					规则说明
				</view> -->
			</view>
			
			<view style="padding-left: 26rpx;">
				<u-time-line v-for="(item,index) in accidentDescriptions" :key="index">
					<u-time-line-item nodeTop="2">
						<template v-slot:node>
							<view class="u-node" style="background: #002a58;">
								<!-- 此处为uView的icon组件 -->
								<!-- <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon> -->
								<image src="../../static/sjz.png" mode="" class="titleImg" style="padding-right: 0;"></image>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="_flex _justify_between">
									<view class="u-order-title">{{item.claimDate}}</view>
									<view class="">
										{{item.totalFee}}
									</view>
								</view>
								<view class="u-order-desc">说明：{{item.description}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/ybwxls.png" class="titleImg" mode="aspectFit"></image>维修信息
				<!-- <view class="report_tit_r" style="color: #888;">
					规则说明
				</view> -->
			</view>
			<view>
				<view style="margin-top: 40rpx;">
					<u-table padding='24rpx' border-color="#d8d8d8" font-size="28" color="color: #2C2C2C;">
						<view v-for="(item,index) in mtnceRecord" :key="index">
							<u-tr class="u-tr">
								<u-th class="u-td">时间：{{item.date}}</u-th>
								<u-th class="u-td">里程：{{item.mile}}公里</u-th>
							</u-tr>
							<u-tr class="u-tr">
								<u-td class="u-td td1">
									<view>项目：{{item.detail}}</view>
									<view>材料：{{item.other}}</view>
								</u-td>
							</u-tr>
						</view>
					</u-table>
				</view>
			</view>
			<!-- <view style="padding-left: 26rpx;">
				<u-time-line v-for="(item,index) in mtnceRecord" :key="index">
					<u-time-line-item nodeTop="2">
						<template v-slot:node>
							<view class="u-node" style="background: #002a58;">
								<image src="../../static/sjz.png" mode="" class="titleImg1" style="padding-right: 0;"></image>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="_flex _justify_between">
									<view class="u-order-title">{{item.date}}</view>
									<view class="">
										{{item.mile}}公里
									</view>
								</view>
								<view class="u-order-desc">项目：{{item.detail}}</view>
								<view class="u-order-desc">材料：{{item.other}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view> -->
		</view>


		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/jllcfx.png" class="titleImg" mode="aspectFit"></image>
				里程记录分析
<!-- 
				<view class="report_tit_r" style="color: #888;">
					规则说明
				</view> -->
			</view>

			<view class="">
				<u-table  padding='20rpx' font-size="30" color="#2c2c2c">
					<u-tr>
						<u-th>时间</u-th>
						<u-th>里程（公里）</u-th>
					</u-tr>
					<u-tr v-for="(item,index) in mileageRecords" :key="index">
						<u-td>{{item.date}}</u-td>
						<u-td>{{item.mile}}</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>
			</view>
	</view>
</template>

<script>
	import API from "@/api/report.js"
	export default {
		onLoad(options) {
			console.log(options);
			this.orderNo = options.orderNo;
		},
		onShow() {
			this.getMaintenanceRecordsReport()
		},
		data() {
			return {
				form: {},
				// isNum: 0,
				carInfo:{
				},
				numList: [{
					name: '优'
				}, {
					name: '良'
				}, {
					name: '中'
				}, {
					name: '差'
				}, ],
				mileageRecords: [],
				mtnceRecord: [],
				accidentGrade: 0,
				accidentDescriptions:[],
			};
		},
		methods: {
			getMaintenanceRecordsReport(){
				let data = {
						orderNo: this.orderNo
					}
					API.getMaintenanceRecordsReport(data).then(res=>{
						console.log(res)
						if(res.code==200){
							this.carInfo = res.data.carInfo;
							
							this.mileageRecords = res.data.mileageRecords;
							this.mtnceRecord = res.data.mtnceRecord;
							for(let i in this.mtnceRecord){
								if(!this.mtnceRecord[i].detail){
									this.mtnceRecord[i].detail = "--"
								}
								if(!this.mtnceRecord[i].other){
									this.mtnceRecord[i].other = "--"
								}
							}
							this.accidentDescriptions = res.data.accidentDescriptions;
							console.log(res.data.accidentGrade)
							if (res.data.accidentGrade == 'A') {
								this.accidentGrade = 1
							}
							if (res.data.accidentGrade == 'B') {
								this.accidentGrade = 2
							}
							if (res.data.accidentGrade == 'C') {
								this.accidentGrade = 3
							}
							if (res.data.accidentGrade == 'D') {
								this.accidentGrade = 4
							}
							// this.orderNo = res.data.orderNo;
							// uni.navigateTo({
							// 	url:"./carReportDetail?orderNo=" + this.orderNo
							// })
						}
				})
			}
		}
	};
</script>
<style scoped lang="scss">
	.jdtList{
		display: flex;
		justify-content: space-between;
		view{
			view{
				width: 15rpx;
				height: 15rpx;
				background: #D8D8D8;
				border-radius: 50%;
				margin: auto;
				margin-bottom: 10rpx;
			}
		}
	}
	.act{
		width: 20rpx !important;
		height: 20rpx !important;
		background: #FD7E6E !important;
	}
	.act1{
		color: #FD7E6E !important;
	}
	.xian{
		width: 100rpx;
		height: 2rpx;
		margin-top: 10rpx;
		background: #D8D8D8;
	}
	.tips {
		color: #4e4322;
		background-color: #FFDF99;
		font-size: 24rpx;
		height: auto;
		line-height: 50rpx;
		padding: 12rpx 24rpx;
		box-sizing: border-box;
	}

	.carBox {
		line-height: 40rpx;
		color: #fff;
		background: #1F1D36;
		// border-radius: 20rpx 20rpx 0 0;
		padding: 32rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		box-sizing: border-box;
		border-left: 5px solid #002B56;
	}

	/* 时间轴 */
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.reportbox1 {
		padding: $uni-widthspace;
		background: #fff;
		box-sizing: border-box;
	}
	
	.reportbox {
		// padding: $uni-widthspace;
		padding: 24rpx;
		box-sizing: border-box;
		margin: 5rpx 0;
		font-size: 30rpx;
		overflow: hidden;
	
	}

	.report_tit {
		font-weight: bold;
		position: relative;
		margin-bottom: 12rpx;

	}

	.titleImg1 {
		width: 34rpx;
		height: 34rpx;
	}

	.report_tit_r {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	
	.titleImg {
		width: 38rpx;
		height: 38rpx;
		margin-right: 22rpx;
	}
	.td1{
		view:nth-child(1){
			text-align: left;
		}
		view:nth-child(2){
			text-align: left;
			margin-top: 16rpx;
		}
	}
	
</style>
